<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>thacher update</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/css/layui.css}" media="all">
    <script th:src="@{/js/jquery-3.5.1.min.js}"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-col-lg8 layui-col-lg-offset2">
    <form class="layui-form" id="teacher-form" lay-filter="teacher-form">
        <div class="layui-form-item" hidden="hidden">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-block">
                <input type="text" name="id" id="id" autocomplete="off" lay-verify="id" hidden class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">教师编号</label>
            <div class="layui-input-block">
                <input type="text" name="teacher_id" id="teacherId" autocomplete="off" lay-verify="teacherId"
                       placeholder="请输入教师编号" disabled
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">教师姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" id="teacherName" autocomplete="off" lay-verify="name" placeholder="请输入姓名"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" id="man" value="0" title="男">
                <input type="radio" name="gender" id="female" value="1" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">手机</label>
                <div class="layui-input-inline">
                    <input type="tel" name="phone" id="phone" lay-verify="phone" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="email" id="email" lay-verify="email" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">院系</label>
            <div class="layui-input-inline">
                <select name="collegeId" id="select-collegeInfo" type="select" lay-verify="collegeId"
                        lay-filter="select-collegeInfo">
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="systemId" id="select-system" type="select" lay-verify="systemId">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-inline">
                    <input type="text" name="role" id="role" lay-verify="role" autocomplete="off" disabled
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="demo1" id="sub-btn">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
<script th:src="@{/layui.js}" src="layui.js" charset="utf-8"></script>
<script>
    var request = 'http://localhost:8080/'
    layui.use('form', function () {
        var form = layui.form;
        $(function () {
            let ID = window.sessionStorage.getItem('teacherID');
            $.ajax({
                url: request + 'teacher/query/' + ID,
                type: 'GET',
                dataType: "JSON",
                success: function (res) {
                    if (res.code === 0) {
                        let teacher = res.data;
                        $("#id").val(teacher.id);
                        $("#teacherId").val(teacher.teacherId);
                        $("#teacherName").val(teacher.name);
                        if (teacher.gender === 0) {
                            $("#man").prop("checked", "checked");
                        } else {
                            $("#female").prop("checked", "checked");
                        }
                        $("#email").val(teacher.email);
                        $("#phone").val(teacher.phone);
                        $("#role").val(teacher.role);
                        collegeInfo("select-collegeInfo", teacher.collegeId);
                        systemInfo("select-system", teacher.collegeId, teacher.systemId);
                    }
                }
            })
        })
        form.on('select(select-collegeInfo)', function (data) {
            let value = data.value;
            $.ajax({
                url: request + 'info/system',
                type: "GET",
                data: {collegeId: value},
                dataType: "JSON",
                success: function (JSONResult) {
                    let code = JSONResult.code;
                    let data = JSONResult.data;
                    if (code === 0) {
                        $("#select-system").empty();
                        $("#select-system").append("<option value=>请选择系</option>");
                        data.forEach((item) => $("#select-system").append("<option value=" + item.systemId + ">" + item.name + "</option>"))
                        form.render('select');
                    }
                }
            })
        });
        // 自定义验证规则
        form.verify({
            id: function (value) {
                if (value.length < 1) {
                    return 'id不可改！';
                }
            },
            teacherId: function (value) {
                if (value.length < 1) {
                    return '教师编号不可为空！';
                }
            },
            name: function (value) {
                if (value.length < 1) {
                    return '教师姓名不能为空！';
                }
            },
            collegeId: function (value) {
                if (value.length < 1) {
                    return '学院不能为空！';
                }
            },
            systemId: function (value) {
                if (value.length < 1) {
                    return '系不能为空！'
                }
            }
        });
        // 监听提交
        form.on('submit(demo1)', function (data) {
            // submit 提交事件
            let id = $("#teacherId").val();
            let serialize = $("#teacher-form").serialize();
            serialize = "teacherId=" + id + "&" + serialize;
            $.ajax({
                url: request + '/teacher/update',
                type: "PUT",
                data: serialize,
                dataType: "JSON",
                success: function (JSONResult) {
                    if (JSONResult.code === 0) {
                        layer.msg("修改成功！");
                    } else {
                        layer.msg("修改失败！");
                    }
                }
            });
            return false;
        });


        function collegeInfo(collegeId, id) {
            let cid = "#" + collegeId;
            $.ajax({
                url: request + 'info/college',
                type: "GET",
                dataType: "JSON",
                success: function (JSONResult) {
                    let code = JSONResult.code;
                    let data = JSONResult.data;
                    if (code === 0) {
                        for (let item of data) {
                            if (item.collegeId === id) {
                                $(cid).append("<option value=" + item.collegeId + " selected='selected'>" + item.name + "</option>")
                            } else {
                                $(cid).append("<option value=" + item.collegeId + ">" + item.name + "</option>")
                            }
                        }
                        form.render();
                    }
                }
            })
        }

        function systemInfo(system, collegeId, systemId) {
            let sys = "#" + system;
            let cid = collegeId;
            let sid = systemId;
            $.ajax({
                url: request + 'info/system',
                type: "GET",
                data: {collegeId: cid},
                dataType: "JSON",
                success: function (JSONResult) {
                    let code = JSONResult.code;
                    let data = JSONResult.data;
                    if (code === 0) {
                        $(sys).empty();
                        for (let item of data) {
                            if (item.systemId === sid) {
                                $(sys).append("<option value=" + item.systemId + " selected>" + item.name + "</option>")
                            } else {
                                $(sys).append("<option value=" + item.systemId + ">" + item.name + "</option>")
                            }
                        }
                        form.render();
                    }
                }
            })
        }
    })

</script>
</html>